<template>
  <div class="user-management-container">
    <h2>用户管理</h2>
    <div class="filter-section">
      <input type="text" v-model="searchQuery" placeholder="搜索用户名或邮箱..." class="search-input">
      <select v-model="roleFilter" class="role-select">
        <option value="">全部角色</option>
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </select>
      <select v-model="statusFilter" class="status-select">
        <option value="">全部状态</option>
        <option value="active">活跃</option>
        <option value="inactive">禁用</option>
      </select>
      <button class="refresh-btn">刷新</button>
    </div>
    
    <table class="user-table">
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>角色</th>
          <th>注册时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role === 'admin' ? '管理员' : '普通用户' }}</td>
          <td>{{ user.registerDate }}</td>
          <td>
            <span :class="['status', user.status]">
              {{ user.status === 'active' ? '活跃' : '禁用' }}
            </span>
          </td>
          <td>
            <button class="edit-btn">编辑</button>
            <button class="status-btn" @click="toggleUserStatus(user.id)">
              {{ user.status === 'active' ? '禁用' : '启用' }}
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div class="pagination">
      <button :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'UserManagement',
  setup() {
    // 模拟用户数据
    const users = ref([
      { id: 1, username: 'admin', email: 'admin@example.com', role: 'admin', registerDate: '2024-01-15', status: 'active' },
      { id: 2, username: 'user1', email: 'user1@example.com', role: 'user', registerDate: '2024-02-10', status: 'active' },
      { id: 3, username: 'user2', email: 'user2@example.com', role: 'user', registerDate: '2024-02-20', status: 'inactive' },
      { id: 4, username: 'user3', email: 'user3@example.com', role: 'user', registerDate: '2024-03-05', status: 'active' },
      { id: 5, username: 'user4', email: 'user4@example.com', role: 'user', registerDate: '2024-03-15', status: 'active' }
    ])
    
    // 分页数据
    const currentPage = ref(1)
    const totalPages = ref(1)
    
    // 过滤条件
    const searchQuery = ref('')
    const roleFilter = ref('')
    const statusFilter = ref('')
    
    // 切换用户状态
    const toggleUserStatus = (userId) => {
      const user = users.value.find(u => u.id === userId)
      if (user) {
        user.status = user.status === 'active' ? 'inactive' : 'active'
      }
    }
    
    return {
      users,
      currentPage,
      totalPages,
      searchQuery,
      roleFilter,
      statusFilter,
      toggleUserStatus
    }
  }
}
</script>

<style scoped>
.user-management-container {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.filter-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.role-select,
.status-select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  min-width: 120px;
}

.refresh-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn:hover {
  background-color: #40a9ff;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background-color: #fafafa;
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

td {
  font-size: 14px;
  color: #333;
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.active {
  background-color: #f6ffed;
  color: #52c41a;
}

.status.inactive {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.edit-btn, .status-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
}

.edit-btn {
  background-color: #1890ff;
  color: white;
}

.edit-btn:hover {
  background-color: #40a9ff;
}

.status-btn {
  background-color: #faad14;
  color: white;
}

.status-btn:hover {
  background-color: #ffc53d;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.pagination button {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
  }
  
  .search-input,
  .role-select,
  .status-select {
    width: 100%;
  }
  
  .user-table {
    display: block;
    overflow-x: auto;
  }
}
</style>